<template>
  <div id="question-form">
    <!-- 添加 -->
    <div class="add_questions">
      <p>说明：目前支持学科和关键字条件筛选</p>
      <el-button size="mini" icon="el-icon-edit" type="success" @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </div>

    <el-form :inline="true" ref="form" :model="form" label-width="70px">
      <el-form-item size="medium" label="学科">
        <el-select
          @change="onChangeSubject"
          v-model="form.subjectID"
          placeholder="请选择"
        >
          <el-option
            v-for="item in questionForm.subjectData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select v-model="form.catalogID" placeholder="请选择">
          <el-option
            v-for="item in questionForm.directoryTow"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="form.tags" placeholder="请选择">
          <el-option
            v-for="item in questionForm.tags"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="medium" label="关键字">
        <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select v-model="form.questionType" placeholder="请选择">
          <el-option v-for="item in questionForm.questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select v-model="form.difficulty" placeholder="请选择">
          <el-option v-for="item in questionForm.difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="form.direction" placeholder="请选择">
          <el-option v-for="item in questionForm.direction" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select v-model="form.creatorID" placeholder="请选择">
          <el-option
            v-for="item in questionForm.enroll"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="form.remarks"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="form.shortName"></el-input>
      </el-form-item>
      <el-form-item class="city" label="城市">
        <el-select @change="onChangeCitys" v-model="form.province" placeholder="请选择">
          <el-option v-for="item in questionForm.provinces" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="form.city" placeholder="请选择">
          <el-option v-for="item in questionForm.citys" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button @click="resetForm" size="mini">清除</el-button>
        <el-button size="mini" type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as dirsimple } from '@/api/hmmm/directorys'
import { simple as tagssimple } from '@/api/hmmm/tags'
import { simple as userSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice, list } from '@/api/hmmm/questions'
export default {
  name: 'QuestionForm',
  data () {
    return {
      questionForm: {
        subjectData: [], // 学科
        directoryTow: [], // 二级目录
        tags: [], // 标签
        enroll: [], // 录入人
        provinces: [], // 所有城市
        citys: [], // 城市下的地区
        direction, // 方向
        questionType, // 题型
        difficulty // 难度
      },
      // v-model绑定的数据
      form: {
        subjectID: '', // 学科当前项
        catalogID: '', // 当前目录
        tags: '', // 当前标签
        creatorID: '', // 当前录入人
        questionType: '', // 试题类型questionType
        difficulty: '', // 难度
        direction: '', // 方向
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '',
        city: '' // 城市
      }
    }
  },
  props: {
    list: {
      type: Object,
      required: true
    },
    question: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.loadSimple()
  },
  // 定义方法
  methods: {
    async loadSimple () {
      try {
        const res = await simple()
        this.questionForm.subjectData = res.data
        const { data: userRes } = await userSimple()
        this.questionForm.enroll = userRes
        this.questionForm.provinces = provinces()
      } catch (err) {
        console.dir(err)
      }
    },
    // 二级目录
    async onChangeSubject (subjectID) {
      try {
        const { data: res } = await dirsimple({ subjectID })
        this.questionForm.directoryTow = res
        const { data: tagsres } = await tagssimple({ subjectID })
        this.questionForm.tags = tagsres
      } catch (err) {
        console.dir(err)
      }
    },
    // 选择城市
    onChangeCitys (val) {
      this.questionForm.citys = citys(val)
      this.form.city = this.questionForm.citys[0]
    },
    // 重置
    resetForm () {
      // this.$refs.form.resetFields()
      // console.log(this.$refs.form.resetFields)
      this.form = {
        subjectID: '', // 学科当前项
        catalogID: '', // 当前目录
        tags: '', // 当前标签
        creatorID: '', // 当前录入人
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '',
        city: ''
      }
      this.questionForm.citys = []
    },
    async onSearch () {
      for (const key in this.form) {
        if (this.form[key] === '') {
          delete this.form[key]
        }
      }
      try {
        let res
        if (this.question) {
          res = (await list({ ...this.form, ...this.list })).data
        } else {
          res = (await choice({ ...this.form, ...this.list })).data
        }
        this.$emit('tableData', res, this.form)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less">
.add_questions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  p {
    font-size: 12px;
    color: #ffc0cb;
  }
}
/deep/ .el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 25%;
    margin-right: 0;
    white-space: nowrap;
    .el-form-item__content {
      width: 70%;
      .el-select--medium,
      .el-input--medium {
        width: 100%;
      }
    }
  }
  .city {
    .el-form-item__content {
      .el-select--medium {
        display: inline-block;
        width: 50%;
      }
    }
  }
  .btns {
    text-align: right;
  }
}
</style>
